* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: #F2F6FC;
}

.box {
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.box p {
  width: 260px;
  height: 260px;
  border: 20px solid rgba(255, 255, 255, .5);
  background-image: url(img/1.jpg);
  background-origin: border-box;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  transition: transform 2s;
}

.box h1 {
  font-family: '楷体';
  width: 300px;
  height: 300px;
  background-color: #409EFF;
  color: white;
  border: 2px solid #DCDFE6;
  border-radius: 50%;
  text-align: center;
  line-height: 300px;
  position: absolute;
  transform: scale(0, 0) rotate(0deg);
  transition: transform 2s;
}

.box:hover p {
  transform: scale(0, 0) rotate(360deg);
}

.box:hover h1 {
  transform: scale(1, 1) rotate(360deg);
}